Toast 元件在應用主要在提示使用者的訊息，通常使用在 API 回傳時成功的訊息顯示，並設定秒數到達後自動隱藏。(若 API 回傳錯誤個人習慣採用 ConfirmDialog 元件)

由於 API 可能在不同頁面下進行呼叫，Toast 可放置於最外層元件上，PrimeVue 提供 ToastService 方法可跨元件呼叫 Toast 元件顯示。

Toast Service

ToastService 設定及使用方法：

1. 在 main.js 下設定 ToastService

import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);

2. 在實作上，先將 Toast 元件放置在 App.vue 中，再由其他頁面觸發：

// App.vue
<Toast />

// ToastView.vue
<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();

const show = () => {
    toast.add({ severity: 'success', summary: 'Info', detail: 'Message Content', life: 3000 });
};
</script>

<template>
    <Button label="Show" @click="show()" />
</template>

Toast Service 屬性

1. severity：提供不同語意上的色彩，包含 error、secondary、info、success、warn、contrast。
2. summary：為 toast 標題，即顯示 toast 的主要目的(總結)。
3. detail：toast 的詳細資訊。
4. closable：是否可手動關閉該 toast，設定為 true 或 false 。
5. life：顯示 toast 的毫秒數。
6. group：可設定 toast 群組，在 toast service 可指定要哪個群組的 toast 顯示。
7. styleClass：訊息樣式。
8. contentStyleClass：內容樣式。

群組設定

若要指定特定的 Toast 顯示，可在 Toast 元件上加上 group 屬性，且在呼叫 toast.add 時也加上對應 group 屬性，其 group 名稱須一致。

// App.vue
<Toast group="group1" />
<Toast group="group2" />

// ToastView.vue
<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();

const showGroup1 = () => {
    toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000, group: 'group1' });
};

const showGroup2 = () => {
    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000, closable: false, group: 'group2' });
    toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 3000, closable: false, group: 'group2' });
};
</script>

<template>
    <main class="p-6">
        <Button label="ShowGroup1" @click="showGroup1()" class="me-3" />
        <Button label="ShowGroup2" @click="showGroup2()" />
    </main>
</template>

以下為點擊 ShowGroup2 按鈕時的 Toast 顯示：

Remove Toast

若沒設定 life 自動隱藏的時間，可改使用其他 Toast Service 的其他方法隱藏。

1. remove
2. removeGroup：帶入 group 名稱指定隱藏特定群組的 Toast
3. removeAllGroups：隱藏所有 Toast

// ToastView.vue
<script setup>
const removeGroup2 = () => {
    toast.removeGroup('group2');
}

const removeAllGroup = () => {
    toast.removeAllGroups();
}
</script>

<template>
	<Button label="RemoveGroup2" @click="removeGroup2()" outlined class="me-3" />
	<Button label="RemoveGroup2" @click="removeAllGroup()" outlined />
</template>

參考連結：https://primevue.org/toast/